"use client"

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { LikesTab } from "./likes-tab"
import { PlaylistsTab } from "./playlists-tab"
import { FollowingTab } from "./following-tab"
import { FollowersTab } from "./followers-tab"
import type { Song } from "@/types/song"
import type { Album } from "@/types/album"
import type { Playlist } from "@/types/playlist"
import type { MV } from "@/types/mv"
import type { UserFollower, UserFollowing } from "@/types/user"

interface ProfileTabsProps {
  likedSongs: Song[]
  likedAlbums: Album[]
  likedPlaylists: Playlist[]
  likedMVs: MV[]
  createdPlaylists: Playlist[]
  following: UserFollowing[]
  followers: UserFollower[]
  isLoading?: boolean
}

export function ProfileTabs({
  likedSongs,
  likedAlbums,
  likedPlaylists,
  likedMVs,
  createdPlaylists,
  following,
  followers,
  isLoading = false,
}: ProfileTabsProps) {
  return (
    <Tabs defaultValue="likes" className="w-full">
      <TabsList className="grid w-full grid-cols-4">
        <TabsTrigger value="likes">我喜欢</TabsTrigger>
        <TabsTrigger value="playlists">我创建的歌单</TabsTrigger>
        <TabsTrigger value="following">关注</TabsTrigger>
        <TabsTrigger value="followers">粉丝</TabsTrigger>
      </TabsList>

      <TabsContent value="likes" className="min-h-[400px]">
        <LikesTab
          songs={likedSongs}
          albums={likedAlbums}
          playlists={likedPlaylists}
          mvs={likedMVs}
          isLoading={isLoading}
        />
      </TabsContent>

      <TabsContent value="playlists" className="min-h-[400px]">
        <PlaylistsTab playlists={createdPlaylists} isLoading={isLoading} />
      </TabsContent>

      <TabsContent value="following" className="min-h-[400px]">
        <FollowingTab following={following} isLoading={isLoading} />
      </TabsContent>

      <TabsContent value="followers" className="min-h-[400px]">
        <FollowersTab followers={followers} isLoading={isLoading} />
      </TabsContent>
    </Tabs>
  )
}

